.wraper {
    background-size: cover;
    background-repeat: no-repeat;

    &.dark {
        --subtitle-color: #3333331a;
        --title-color: #333;
    }

    &.light {
        --subtitle-color: #ffffff1a;
        --title-color: #fff;
    }
}

.main {
    @apply  flex flex-col items-center justify-center ;
}

.followimg{
    @apply block mx-auto object-cover;
}

.followdesc {
    @apply font-500;

    color: #fff;
}

.mobile.wraper {
    .main {
        @apply overflow-hidden;
    
        .swiper{
            @apply  px-67px py-5;
            // max-width: calc(100% - 134px);
            width: 100%;
        
            .swiper-slide{
                border-radius: 4px;
                box-shadow: 0 0 12px 0 #00000014;
                overflow: hidden;
                width: auto;
            }

            .info{
                @apply flex flex-col items-center justify-center;

                overflow: hidden;
                max-width: 208px;

            
                .infoimg{
                    width: 100%;
                    padding: 16px;
                    background: rgb(255 255 255 / 8%);
                    aspect-ratio: 208/156;;
                    border-radius: 4px;
                            
                    .picture{
                        width: 100%;
                        aspect-ratio: 208/156;
                        object-fit: cover
                    }
                 }

                 .info-text{
                    @apply flex flex-col items-center justify-center w-full;

                    background: var(--design-theme-color);
                    border-bottom-right-radius: 4px;
                    border-bottom-left-radius: 4px;
                    color: #fff;
                    padding: 9px 10px;
                    gap: 6px;

                    .text-title{
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 14px;
                    }

                    .text-desc{
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 12px;
                    }
                }
            }  
        }
    }
}

.pc.wraper {
    .main {
        @apply overflow-hidden;
    
        .swiper{
            @apply pt-60px pb-80px mb-100px mx-auto;
            // max-width: 1060px;
            width: 100%;

            .swiper-pagination-box{
                max-width: 1180px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        
            .swiper-slide{
                border-radius: 4px;
                box-shadow: 0 0 12px 0 #00000014;
                overflow: hidden;
                max-width: 380px;
            }

            .info{
                @apply flex flex-col items-center justify-center;

                overflow: hidden;
            
                .infoimg{
                    width: 100%;
                    padding: 24px 20px;
                    border-radius: 4px;
                    background: rgb(255 255 255 / 8%);
                    aspect-ratio: 340/255;

                    .picture{
                        width: 100%;
                        aspect-ratio: 340/255;
                        object-fit: cover;
                        border-radius: 4px;
                    }
                 }

                 .info-text{
                    @apply flex flex-col items-center justify-center w-full;

                    background: var(--design-theme-color);
                    border-bottom-right-radius: 4px;
                    border-bottom-left-radius: 4px;
                    color: #fff;
                    padding: 14px 20px;
                    gap: 4px;
                    font-weight: 400;
                
                    .text-title{
                        font-size: 16px;
                        line-height: 24px;
                    }

                    .text-desc{
                        font-size: 14px;
                        line-height: 20px;
                    }
                }
            }  
        }
    }
}
